<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :model="searchForm">
        <el-row>
          <el-input size="large" placeholder="请输入搜索内容" v-model="searchForm.searchKey" @keyup.enter.native="search"
                    clearable>
            <el-button slot="append" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          </el-input>
        </el-row>
      </el-form>
      <div class="main">
        <ul class="song">
          <li v-for="son in list">
            <p>
              <el-image style="width: 50px; height: 50px; float: left;margin-right: 10px" :src="son.pic120"
                        :preview-src-list="[son.pic]">
              </el-image>
              {{son.name}} -- {{son.artist}}
              <br/><<{{son.album}}>> {{son.songTimeMinutes}}
              <i class="el-icon-video-play" @click="loadAndPlay(son)"></i>
            </p>
            <p v-show="son.info" class="info">{{son.info}}</p>
          </li>
        </ul>
        <div v-if="playSong" class="footer-blocker"></div>
      </div>
      <div class="footer" v-if="playSong">
        <p>
          <a class="download" v-if="playUrl" target="_blank" :href="playUrl">
            <span class="songName">{{playSong.songName}}</span>
          </a>
          -- <span class="artistName">{{playSong.artistName}}</span>
          <span class="albumName"><<{{playSong.albumName}}>></span>

          <a class="lrc" v-if="playSong.lrcLink" target="_blank" :href="playSong.lrcLink">
            <span>[ 歌词 ]</span>
          </a>
        </p>
        <audio v-if="playUrl" :src="playUrl" controls="controls" autoplay></audio>
      </div>
      <div class="footer" v-if="playSong">
        <el-image style="width: 90px; height: 90px; margin-right: 10px"
                  :src="playSong.pic" :preview-src-list="[playSong.pic]">
        </el-image>
        <div style="margin-right: 10px">
          <p v-for="br in playSong.coopFormats">
            {{br}}
            <el-button icon="el-icon-video-play" @click="play(br)" circle size="mini"></el-button> &nbsp;
            <el-link type="primary" v-if="playUrl" target="_blank" :href="playUrl" icon="el-icon-download"
                     download="">下载
            </el-link>
          </p>
        </div>
        <div style="flex-grow: 1">
          <p>
            <span class="songName">{{playSong.songName}}</span>
            -- <span class="artistName">{{playSong.artist}}</span>
            <span class="albumName"><<{{playSong.album}}>></span>
          </p>
          <audio v-if="playUrl" :src="playUrl" controls="controls" autoplay></audio>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import kuwo from '@/api/admin/music/kuwo'

  const proxy = process.env.VUE_APP_PROXY;

  export default {
    name: "Kuwo",
    data() {
      return {
        searchForm: {
          searchKey: ''
        },
        searchKey: '',
        // list: [{"musicrid":"MUSIC_321327","artist":"周华健","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img1.kuwo.cn/star/albumcover/500/99/20/2836399671.jpg","isstar":0,"rid":321327,"duration":188,"score100":"73","content_type":"0","track":7,"hasLossless":true,"hasmv":1,"releaseDate":"1994-06-01","album":"风雨无阻","albumid":1260,"pay":"16515324","artistid":332,"albumpic":"https://img1.kuwo.cn/star/albumcover/500/99/20/2836399671.jpg","originalsongtype":1,"songTimeMinutes":"03:08","isListenFee":false,"pic120":"https://img1.kuwo.cn/star/albumcover/120/99/20/2836399671.jpg","name":"刀剑如梦","online":1,"payInfo":{"play":"1100","download":"1111","local_encrypt":"1","cannotDownload":0,"cannotOnlinePlay":0,"feeType":{"song":"1","vip":"1"},"down":"1111"}},{"musicrid":"MUSIC_9808973","artist":"吴亦凡","mvpayinfo":{"play":0,"vid":0,"down":0},"nationid":"0","pic":"https://img4.kuwo.cn/star/albumcover/500/68/78/2920636219.jpg","isstar":0,"rid":9808973,"duration":213,"score100":"60","content_type":"0","track":1,"hasLossless":false,"hasmv":1,"releaseDate":"2016-09-05","album":"刀剑如梦","albumid":1349403,"pay":"0","artistid":138904,"albumpic":"https://img4.kuwo.cn/star/albumcover/500/68/78/2920636219.jpg","originalsongtype":0,"songTimeMinutes":"03:33","isListenFee":false,"pic120":"https://img4.kuwo.cn/star/albumcover/120/68/78/2920636219.jpg","name":"刀剑如梦","online":1,"payInfo":{"cannotDownload":0,"cannotOnlinePlay":0}},{"musicrid":"MUSIC_41196396","artist":"周华健","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img2.kuwo.cn/star/albumcover/500/51/43/4239375159.jpg","isstar":0,"rid":41196396,"duration":202,"score100":"55","content_type":"0","track":4,"hasLossless":true,"hasmv":1,"releaseDate":"2018-04-18","album":"周华健 侠客行·专场","albumid":5484073,"pay":"16515324","artistid":332,"albumpic":"https://img2.kuwo.cn/star/albumcover/500/51/43/4239375159.jpg","originalsongtype":0,"songTimeMinutes":"03:22","isListenFee":false,"pic120":"https://img2.kuwo.cn/star/albumcover/120/51/43/4239375159.jpg","name":"刀剑如梦(Live)","online":1,"payInfo":{"play":"1100","download":"1111","cannotDownload":0,"cannotOnlinePlay":0,"feeType":{"song":"1","vip":"1"},"down":"1111"}},{"musicrid":"MUSIC_7087485","artist":"周华健&张捷","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img3.kuwo.cn/star/albumcover/500/1/93/1459031885.jpg","isstar":0,"rid":7087485,"duration":198,"score100":"52","content_type":"0","track":26,"hasLossless":true,"hasmv":0,"releaseDate":"2016-05-15","album":"谁是大歌神 欢唱嘉年华","albumid":553294,"pay":"16515324","artistid":332,"albumpic":"https://img3.kuwo.cn/star/albumcover/500/1/93/1459031885.jpg","originalsongtype":0,"songTimeMinutes":"03:18","isListenFee":false,"pic120":"https://img3.kuwo.cn/star/albumcover/120/1/93/1459031885.jpg","name":"刀剑如梦(Live)","online":1,"payInfo":{"play":"1100","local_encrypt":"1","cannotDownload":0,"cannotOnlinePlay":0,"feeType":{"song":"1","vip":"1"},"down":"1111"}},{"musicrid":"MUSIC_6695466","artist":"玉面小嫣然","mvpayinfo":{"play":0,"vid":0,"down":0},"nationid":"0","pic":"https://img4.kuwo.cn/star/starheads/500/77/23/3935081856.jpg","isstar":0,"rid":6695466,"duration":197,"score100":"52","content_type":"0","track":0,"hasLossless":false,"hasmv":0,"releaseDate":"1970-01-01","album":"","albumid":0,"pay":"0","artistid":264599,"albumpic":"https://img4.kuwo.cn/star/starheads/500/77/23/3935081856.jpg","originalsongtype":0,"songTimeMinutes":"03:17","isListenFee":false,"pic120":"https://img4.kuwo.cn/star/starheads/120/77/23/3935081856.jpg","name":"刀剑如梦(古筝版)","online":1,"payInfo":{"play":"0000","download":"0000","cannotDownload":0,"cannotOnlinePlay":0,"down":"0000"}},{"musicrid":"MUSIC_80163959","artist":"韩甜甜&关喆&Ella[陈嘉桦]&那英&孟庭苇&温岚","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img2.kuwo.cn/star/albumcover/500/32/86/1950115093.jpg","isstar":0,"rid":80163959,"duration":180,"score100":"53","content_type":"0","track":1,"hasLossless":true,"hasmv":0,"releaseDate":"2019-10-27","album":"蒙面唱将猜猜猜第四季 第3期","albumid":11162109,"pay":"16711935","artistid":3649052,"albumpic":"https://img2.kuwo.cn/star/albumcover/500/32/86/1950115093.jpg","originalsongtype":0,"songTimeMinutes":"03:00","isListenFee":true,"pic120":"https://img2.kuwo.cn/star/albumcover/120/32/86/1950115093.jpg","name":"刀剑如梦(Live)","online":1,"payInfo":{"play":"1111","download":"1111","local_encrypt":"1","cannotDownload":0,"listen_fragment":"1","cannotOnlinePlay":0,"feeType":{"song":"1","vip":"1"},"down":"1111"}},{"musicrid":"MUSIC_24100904","artist":"任嘉伦","mvpayinfo":{"play":0,"vid":0,"down":0},"nationid":"0","pic":"https://img3.kuwo.cn/star/albumcover/500/43/12/2490493383.jpg","isstar":0,"rid":24100904,"duration":182,"score100":"54","content_type":"0","track":8,"hasLossless":true,"hasmv":1,"releaseDate":"2017-04-15","album":"跨界歌王第二季 第1期","albumid":12132410,"pay":"16515324","artistid":1231827,"albumpic":"https://img3.kuwo.cn/star/albumcover/500/43/12/2490493383.jpg","originalsongtype":0,"songTimeMinutes":"03:02","isListenFee":false,"pic120":"https://img3.kuwo.cn/star/albumcover/120/43/12/2490493383.jpg","name":"刀剑如梦(Live)","online":1,"payInfo":{"play":"1100","download":"1111","local_encrypt":"1","cannotDownload":0,"cannotOnlinePlay":0,"feeType":{"song":"1","vip":"1"},"down":"1111"}},{"musicrid":"MUSIC_149527904","artist":"于毅&王子异","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img1.kuwo.cn/star/albumcover/500/43/80/1592575200.jpg","isstar":0,"rid":149527904,"duration":257,"score100":"57","content_type":"0","track":3,"hasLossless":true,"hasmv":1,"releaseDate":"2020-09-05","album":"跨界歌王第五季 第9期","albumid":15582964,"pay":"16515324","artistid":75233,"albumpic":"https://img1.kuwo.cn/star/albumcover/500/43/80/1592575200.jpg","originalsongtype":0,"songTimeMinutes":"04:17","isListenFee":false,"pic120":"https://img1.kuwo.cn/star/albumcover/120/43/80/1592575200.jpg","name":"刀剑如梦(Live)","online":1,"payInfo":{"play":"1100","download":"1111","local_encrypt":"1","cannotDownload":0,"cannotOnlinePlay":0,"feeType":{"song":"1","vip":"1"},"down":"1111"}},{"musicrid":"MUSIC_39811244","artist":"周华健&林海峰","mvpayinfo":{"play":0,"vid":0,"down":0},"nationid":"0","pic":"https://img3.kuwo.cn/star/albumcover/500/59/91/4058170753.jpg","isstar":0,"rid":39811244,"duration":188,"score100":"42","content_type":"0","track":6,"hasLossless":true,"hasmv":0,"releaseDate":"2001-05-29","album":"电视剧歌曲大全","albumid":5302230,"pay":"0","artistid":332,"albumpic":"https://img3.kuwo.cn/star/albumcover/500/59/91/4058170753.jpg","originalsongtype":0,"songTimeMinutes":"03:08","isListenFee":false,"pic120":"https://img3.kuwo.cn/star/albumcover/120/59/91/4058170753.jpg","name":"刀剑如梦","online":1,"payInfo":{"play":"0000","download":"0000","cannotDownload":0,"cannotOnlinePlay":0,"down":"0000"}},{"musicrid":"MUSIC_82542905","artist":"任嘉伦","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img1.kuwo.cn/star/albumcover/500/23/46/3855312487.jpg","isstar":0,"rid":82542905,"duration":182,"score100":"54","content_type":"0","track":0,"hasLossless":true,"hasmv":1,"releaseDate":"2017/4/15","album":"2017跨界歌王 第一期","albumid":11607608,"pay":"0","artistid":1231827,"albumpic":"https://img1.kuwo.cn/star/albumcover/500/23/46/3855312487.jpg","originalsongtype":0,"songTimeMinutes":"03:02","isListenFee":false,"pic120":"https://img1.kuwo.cn/star/albumcover/120/23/46/3855312487.jpg","name":"刀剑如梦","online":1,"payInfo":{"cannotDownload":0,"cannotOnlinePlay":0}},{"musicrid":"MUSIC_65066922","artist":"华晨宇","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img4.kuwo.cn/star/albumcover/500/30/84/1155738541.jpg","isstar":0,"rid":65066922,"duration":156,"score100":"53","content_type":"0","track":1,"hasLossless":true,"hasmv":1,"releaseDate":"2019-03-15","album":"王牌对王牌第四季 第7期","albumid":9328855,"pay":"16711935","artistid":125910,"albumpic":"https://img4.kuwo.cn/star/albumcover/500/30/84/1155738541.jpg","originalsongtype":0,"songTimeMinutes":"02:36","isListenFee":true,"pic120":"https://img4.kuwo.cn/star/albumcover/120/30/84/1155738541.jpg","name":"刀剑如梦(Live)","online":1,"payInfo":{"play":"1111","download":"1111","local_encrypt":"1","cannotDownload":0,"listen_fragment":"1","cannotOnlinePlay":0,"feeType":{"song":"1","vip":"1"},"down":"1111"}},{"musicrid":"MUSIC_41386622","artist":"杨宗纬&楼一萱","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img2.kuwo.cn/star/albumcover/500/61/73/285832192.jpg","isstar":0,"rid":41386622,"duration":218,"score100":"45","content_type":"0","track":3,"hasLossless":true,"hasmv":1,"releaseDate":"2018-05-18","album":"嗨，唱起来  第4期","albumid":5513609,"pay":"16515324","artistid":5265,"albumpic":"https://img2.kuwo.cn/star/albumcover/500/61/73/285832192.jpg","originalsongtype":0,"songTimeMinutes":"03:38","isListenFee":false,"pic120":"https://img2.kuwo.cn/star/albumcover/120/61/73/285832192.jpg","name":"刀剑如梦(Live)","online":1,"payInfo":{"play":"1100","download":"1111","cannotDownload":0,"cannotOnlinePlay":0,"feeType":{"song":"1","vip":"1"},"down":"1111"}},{"musicrid":"MUSIC_142723879","artist":"王智","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img4.kuwo.cn/star/albumcover/500/19/19/3200679308.jpg","isstar":0,"rid":142723879,"duration":105,"score100":"56","content_type":"0","track":17,"hasLossless":true,"hasmv":0,"releaseDate":"2020-06-12","album":"乘风破浪的姐姐 第1期","albumid":14439371,"pay":"16515324","artistid":5342437,"albumpic":"https://img4.kuwo.cn/star/albumcover/500/19/19/3200679308.jpg","originalsongtype":0,"songTimeMinutes":"01:45","isListenFee":false,"pic120":"https://img4.kuwo.cn/star/albumcover/120/19/19/3200679308.jpg","name":"刀剑如梦(Live)","online":1,"payInfo":{"play":"1100","download":"1111","local_encrypt":"1","cannotDownload":0,"cannotOnlinePlay":0,"feeType":{"song":"1","vip":"1"},"down":"1111"}},{"musicrid":"MUSIC_82061552","artist":"周华健&蒋一侨","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img4.kuwo.cn/star/albumcover/500/36/41/4077913283.jpg","isstar":0,"rid":82061552,"duration":222,"score100":"43","content_type":"0","track":3,"hasLossless":true,"hasmv":1,"releaseDate":"2019-11-24","album":"中国梦之声·我们的歌 第4期","albumid":11539703,"pay":"16711935","artistid":332,"albumpic":"https://img4.kuwo.cn/star/albumcover/500/36/41/4077913283.jpg","originalsongtype":0,"songTimeMinutes":"03:42","isListenFee":true,"pic120":"https://img4.kuwo.cn/star/albumcover/120/36/41/4077913283.jpg","name":"刀剑如梦(Live)","online":1,"payInfo":{"play":"1111","download":"1111","local_encrypt":"1","cannotDownload":0,"listen_fragment":"1","cannotOnlinePlay":0,"feeType":{"song":"1","vip":"1"},"down":"1111"}},{"musicrid":"MUSIC_58574220","artist":"谭维维","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img1.kuwo.cn/star/albumcover/500/77/11/125186756.jpg","isstar":0,"rid":58574220,"duration":229,"score100":"45","content_type":"0","track":4,"hasLossless":true,"hasmv":1,"releaseDate":"2018-12-07","album":"梦想的声音第三季 第7期","albumid":7848784,"pay":"16711935","artistid":531,"albumpic":"https://img1.kuwo.cn/star/albumcover/500/77/11/125186756.jpg","originalsongtype":0,"songTimeMinutes":"03:49","isListenFee":true,"pic120":"https://img1.kuwo.cn/star/albumcover/120/77/11/125186756.jpg","name":"刀剑如梦(Live)","online":1,"payInfo":{"play":"1111","download":"1111","local_encrypt":"1","cannotDownload":0,"listen_fragment":"1","cannotOnlinePlay":0,"feeType":{"song":"1","vip":"1"},"down":"1111"}},{"musicrid":"MUSIC_93472535","artist":"纯音乐","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img2.kuwo.cn/star/starheads/500/60/52/607667381.jpg","isstar":0,"rid":93472535,"duration":189,"score100":"39","content_type":"0","track":0,"hasLossless":false,"hasmv":0,"releaseDate":"1970-01-01","album":"","albumid":0,"pay":"0","artistid":11081,"albumpic":"https://img2.kuwo.cn/star/starheads/500/60/52/607667381.jpg","originalsongtype":0,"songTimeMinutes":"03:09","isListenFee":false,"pic120":"https://img2.kuwo.cn/star/starheads/120/60/52/607667381.jpg","name":"刀剑如梦(古筝版)","online":1,"payInfo":{"play":"0000","download":"0000","cannotDownload":0,"cannotOnlinePlay":0,"down":"0000"}},{"musicrid":"MUSIC_61567154","artist":"贾昱&刘宇&刘丰&芊蔚","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img4.kuwo.cn/star/albumcover/500/84/81/2614366666.jpg","isstar":0,"rid":61567154,"duration":185,"score100":"40","content_type":"0","track":4,"hasLossless":true,"hasmv":0,"releaseDate":"2019-01-04","album":"国风美少年 第6期","albumid":8200439,"pay":"0","artistid":1486598,"albumpic":"https://img4.kuwo.cn/star/albumcover/500/84/81/2614366666.jpg","originalsongtype":0,"songTimeMinutes":"03:05","isListenFee":false,"pic120":"https://img4.kuwo.cn/star/albumcover/120/84/81/2614366666.jpg","name":"刀剑如梦(Live)","online":1,"payInfo":{"play":"0000","download":"0000","cannotDownload":0,"cannotOnlinePlay":0,"down":"0000"}},{"musicrid":"MUSIC_140393511","artist":"李雨露&妙静鸥&刘诗琦&张纯如&沈小婷&余子鱼&王玥","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img1.kuwo.cn/star/albumcover/500/87/95/1622077722.jpg","isstar":0,"rid":140393511,"duration":169,"score100":"37","content_type":"0","track":15,"hasLossless":true,"hasmv":1,"releaseDate":"2020-05-16","album":"创造营2020 第3期","albumid":14050928,"pay":"16711935","artistid":5188975,"albumpic":"https://img1.kuwo.cn/star/albumcover/500/87/95/1622077722.jpg","originalsongtype":0,"songTimeMinutes":"02:49","isListenFee":true,"pic120":"https://img1.kuwo.cn/star/albumcover/120/87/95/1622077722.jpg","name":"刀剑如梦(Live)","online":1,"payInfo":{"play":"1111","download":"1111","local_encrypt":"1","cannotDownload":0,"listen_fragment":"1","cannotOnlinePlay":0,"feeType":{"song":"1","vip":"1"},"down":"1111"}},{"musicrid":"MUSIC_4795141","artist":"周华健","mvpayinfo":{"play":0,"vid":0,"down":0},"nationid":"0","pic":"https://img1.kuwo.cn/star/starheads/500/79/11/2974170943.jpg","isstar":0,"rid":4795141,"duration":379,"score100":"37","content_type":"0","track":0,"hasLossless":false,"hasmv":0,"releaseDate":"1970-01-01","album":"","albumid":0,"pay":"16515324","artistid":332,"albumpic":"https://img1.kuwo.cn/star/starheads/500/79/11/2974170943.jpg","originalsongtype":0,"songTimeMinutes":"06:19","isListenFee":false,"pic120":"https://img1.kuwo.cn/star/starheads/120/79/11/2974170943.jpg","name":"刀剑如梦(2010 天子佳人 dj，bb.mix)","online":1,"payInfo":{"play":"1100","download":"1111","cannotDownload":0,"cannotOnlinePlay":0,"feeType":{"song":"1","vip":"1"},"down":"1111"}},{"musicrid":"MUSIC_69368595","artist":"YY阿莲","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img2.kuwo.cn/star/starheads/500/93/64/3794210034.jpg","isstar":0,"rid":69368595,"duration":232,"score100":"34","content_type":"0","track":0,"hasLossless":true,"hasmv":0,"releaseDate":"1970-01-01","album":"","albumid":0,"pay":"0","artistid":3715261,"albumpic":"https://img2.kuwo.cn/star/starheads/500/93/64/3794210034.jpg","originalsongtype":0,"songTimeMinutes":"03:52","isListenFee":false,"pic120":"https://img2.kuwo.cn/star/starheads/120/93/64/3794210034.jpg","name":"刀剑如梦（DJ版）","online":1,"payInfo":{"play":"0000","download":"0000","cannotDownload":0,"cannotOnlinePlay":0,"down":"0000"}},{"musicrid":"MUSIC_38694741","artist":"付娜","mvpayinfo":{"play":0,"vid":0,"down":0},"nationid":"0","pic":"https://img2.kuwo.cn/star/albumcover/500/57/19/3764231242.jpg","isstar":0,"rid":38694741,"duration":206,"score100":"42","content_type":"0","track":1,"hasLossless":true,"hasmv":0,"releaseDate":"2017-10-01","album":"床头音乐抒情古筝三","albumid":2181061,"pay":"16515324","artistid":2408,"albumpic":"https://img2.kuwo.cn/star/albumcover/500/57/19/3764231242.jpg","originalsongtype":0,"songTimeMinutes":"03:26","isListenFee":false,"pic120":"https://img2.kuwo.cn/star/albumcover/120/57/19/3764231242.jpg","name":"刀剑如梦","online":1,"payInfo":{"play":"1100","cannotDownload":0,"feeType":{"song":"1","vip":"1"},"cannotOnlinePlay":0,"down":"1111"}},{"musicrid":"MUSIC_15196988","artist":"周华健&吴亦凡","mvpayinfo":{"play":0,"vid":0,"down":0},"nationid":"0","pic":"https://img4.kuwo.cn/star/albumcover/500/94/93/3539016297.jpg","isstar":0,"rid":15196988,"duration":215,"score100":"38","content_type":"0","track":22,"hasLossless":true,"hasmv":1,"releaseDate":"2016-12-31","album":"“17聚幸福”江苏卫视2017跨年演唱会","albumid":1369767,"pay":"16711935","artistid":332,"albumpic":"https://img4.kuwo.cn/star/albumcover/500/94/93/3539016297.jpg","originalsongtype":0,"songTimeMinutes":"03:35","isListenFee":true,"pic120":"https://img4.kuwo.cn/star/albumcover/120/94/93/3539016297.jpg","name":"刀剑如梦(Live)","online":1,"payInfo":{"play":"1111","download":"1111","local_encrypt":"1","cannotDownload":0,"listen_fragment":"1","cannotOnlinePlay":0,"feeType":{"song":"1","vip":"1"},"down":"1111"}},{"musicrid":"MUSIC_27294283","artist":"何遇程","mvpayinfo":{"play":0,"vid":0,"down":0},"nationid":"0","pic":"https://img2.kuwo.cn/star/albumcover/500/44/65/2652026109.jpg","isstar":0,"rid":27294283,"duration":198,"score100":"22","content_type":"0","track":3,"hasLossless":true,"hasmv":0,"releaseDate":"2017-08-03","album":"期待相见","albumid":3757085,"pay":"0","artistid":267847,"albumpic":"https://img2.kuwo.cn/star/albumcover/500/44/65/2652026109.jpg","originalsongtype":0,"songTimeMinutes":"03:18","isListenFee":false,"pic120":"https://img2.kuwo.cn/star/albumcover/120/44/65/2652026109.jpg","name":"刀剑如梦","online":1,"payInfo":{"play":"0000","download":"0000","cannotDownload":0,"cannotOnlinePlay":0,"down":"0000"}},{"musicrid":"MUSIC_36745623","artist":"莫文蔚","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img2.kuwo.cn/star/albumcover/500/54/10/20891915.jpg","isstar":0,"rid":36745623,"duration":222,"score100":"38","content_type":"0","track":5,"hasLossless":true,"hasmv":0,"releaseDate":"2017-12-02","album":"天籁之战第二季 第7期","albumid":4975865,"pay":"16711935","artistid":909,"albumpic":"https://img2.kuwo.cn/star/albumcover/500/54/10/20891915.jpg","originalsongtype":0,"songTimeMinutes":"03:42","isListenFee":true,"pic120":"https://img2.kuwo.cn/star/albumcover/120/54/10/20891915.jpg","name":"刀剑如梦(Live)","online":1,"payInfo":{"play":"1111","download":"1111","local_encrypt":"1","cannotDownload":0,"listen_fragment":"1","cannotOnlinePlay":0,"feeType":{"song":"1","vip":"1"},"down":"1111"}},{"musicrid":"MUSIC_144592143","artist":"董真","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img2.kuwo.cn/star/starheads/500/89/44/825270847.jpg","isstar":0,"rid":144592143,"duration":48,"score100":"0","content_type":"0","track":0,"hasLossless":false,"hasmv":0,"releaseDate":"1970-01-01","album":"","albumid":0,"pay":"0","artistid":1817,"albumpic":"https://img2.kuwo.cn/star/starheads/500/89/44/825270847.jpg","originalsongtype":0,"songTimeMinutes":"00:48","isListenFee":false,"pic120":"https://img2.kuwo.cn/star/starheads/120/89/44/825270847.jpg","name":"刀剑如梦","online":1,"payInfo":{"play":"0000","download":"0000","cannotDownload":0,"cannotOnlinePlay":0,"down":"0000"}},{"musicrid":"MUSIC_70352979","artist":"MC冰鑫","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img4.kuwo.cn/star/albumcover/500/54/53/3551693913.jpg","isstar":0,"rid":70352979,"duration":76,"score100":"10","content_type":"0","track":1,"hasLossless":true,"hasmv":0,"releaseDate":"2019-06-12","album":"刀剑如梦","albumid":10170447,"pay":"16515324","artistid":258456,"albumpic":"https://img4.kuwo.cn/star/albumcover/500/54/53/3551693913.jpg","originalsongtype":0,"songTimeMinutes":"01:16","isListenFee":false,"pic120":"https://img4.kuwo.cn/star/albumcover/120/54/53/3551693913.jpg","name":"刀剑如梦","online":1,"payInfo":{"play":"1100","download":"1111","cannotDownload":0,"cannotOnlinePlay":0,"feeType":{"song":"1","vip":"1"},"down":"1111"}},{"musicrid":"MUSIC_140998268","artist":"踟蹰","mvpayinfo":{"play":0,"vid":0,"down":0},"isstar":0,"rid":140998268,"duration":198,"score100":"10","content_type":"0","track":0,"hasLossless":false,"hasmv":0,"releaseDate":"1970-01-01","album":"","albumid":0,"pay":"0","artistid":272602,"originalsongtype":0,"songTimeMinutes":"03:18","isListenFee":false,"name":"刀剑如梦(笛子版)","online":1,"payInfo":{"play":"0000","download":"0000","cannotDownload":0,"cannotOnlinePlay":0,"down":"0000"}},{"musicrid":"MUSIC_48140139","artist":"文儿","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img1.kuwo.cn/star/albumcover/500/49/43/1528823302.jpg","isstar":0,"rid":48140139,"duration":214,"score100":"25","content_type":"0","track":0,"hasLossless":false,"hasmv":0,"releaseDate":"2018-07-07","album":"5sing原创音乐精选","albumid":6151356,"pay":"0","artistid":292771,"albumpic":"https://img1.kuwo.cn/star/albumcover/500/49/43/1528823302.jpg","originalsongtype":0,"songTimeMinutes":"03:34","isListenFee":false,"pic120":"https://img1.kuwo.cn/star/albumcover/120/49/43/1528823302.jpg","name":"刀剑如梦","online":1,"payInfo":{"cannotDownload":0,"cannotOnlinePlay":0}},{"musicrid":"MUSIC_10009957","artist":"戴荃&裘继戎","mvpayinfo":{"play":0,"vid":0,"down":0},"nationid":"0","pic":"https://img4.kuwo.cn/star/albumcover/500/43/32/430915355.jpg","isstar":0,"rid":10009957,"duration":279,"score100":"25","content_type":"0","track":2,"hasLossless":true,"hasmv":0,"releaseDate":"2016-11-11","album":"叮咯咙咚呛第二季 第9期","albumid":1362279,"pay":"16515324","artistid":125822,"albumpic":"https://img4.kuwo.cn/star/albumcover/500/43/32/430915355.jpg","originalsongtype":0,"songTimeMinutes":"04:39","isListenFee":false,"pic120":"https://img4.kuwo.cn/star/albumcover/120/43/32/430915355.jpg","name":"刀剑如梦(Live)","online":1,"payInfo":{"play":"1100","download":"1111","cannotDownload":0,"cannotOnlinePlay":0,"feeType":{"song":"1","vip":"1"},"down":"1111"}},{"musicrid":"MUSIC_46829303","artist":"郭靖","mvpayinfo":{"play":0,"vid":0,"down":0},"pic":"https://img4.kuwo.cn/star/starheads/500/90/89/3846116601.jpg","isstar":0,"rid":46829303,"duration":229,"score100":"26","content_type":"0","track":0,"hasLossless":false,"hasmv":0,"releaseDate":"1970-01-01","album":"","albumid":0,"pay":"0","artistid":9167,"albumpic":"https://img4.kuwo.cn/star/starheads/500/90/89/3846116601.jpg","originalsongtype":0,"songTimeMinutes":"03:49","isListenFee":false,"pic120":"https://img4.kuwo.cn/star/starheads/120/90/89/3846116601.jpg","name":"刀剑如梦","online":1,"payInfo":{"cannotDownload":0,"cannotOnlinePlay":0}}],
        list: [],
        playSong: '',
        playUrl: ''
      }
    },
    computed: {},
    mounted() {
      console.log(process.env);
    },
    methods: {
      search() {
        if (!this.searchForm.searchKey) {
          return;
        }
        console.log('search' + this.searchKey);
        kuwo.getSearch(this.searchForm).then(res => {
          let data = JSON.parse(res.data.rs)
          this.list = data.data.list;
          this.loadAndPlay(this.list[0])
        })
      },
      loadAndPlay(song) {
        kuwo.getDetail({
          rid: song.rid
        }).then(res => {
          let data = JSON.parse(res.data.rs)
          let songinfo = data.data.songinfo;
          if (songinfo) {
            this.playSong = songinfo;
            this.playUrl = '';
            // this.playUrl = proxy + '/proxy?url=' + encodeURIComponent(data.songLink)
            this.play('128kmp3')
          }
        })
      },
      play(br) {
        kuwo.getUrl({
          br,
          rid: this.playSong.id
        }).then(res => {
          let data = JSON.parse(res.data.rs)
          let url = data.url;
          this.playUrl = url;
        })
      }
    }

  }
</script>

<style scoped>
  .header {
    padding: 0 20px;
    background: #fff;
  }

  .footer-blocker {
    height: 93px;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    border-bottom: 1px solid #f1f1f1;
  }

  li + li {
    margin-top: 10px;
  }

  .song .info {
    font-size: 0.8em;
    color: #666;
  }

  .song i {
    font-size: 1.2em;
  }

  .footer {
    padding: 0 20px;
    position: fixed;
    z-index: 9999;
    bottom: 0;
    left: 0;
    right: 0;
    background: #e4e4e4;
    display: flex;
    align-items: center;
    justify-content: center;
    /*height: 100px;*/
  }

  .footer .songName {
    font-weight: bold;
  }

  .footer .artistName {
    color: #666;
  }

  .footer .albumName {
    font-size: 0.8em;
    color: #666;
    display: inline-block;
    margin-left: 1em;
  }

  .footer audio {
    width: 100%;
  }


</style>
